<template>
    <div class="nav-top">
        <div class="container">
            <div class="nav-top-left">欢迎来到菲生活资讯平台</div>
            <div class="site_login"></div>
            <ul class="nav-top-right">
                <li class="rate">今日汇率:7.02</li>
                <li class="nav-top-right-app">
                    <div class="icon"></div>
                    <a href="javascript:void(0)" target="_blank"><span>菲生活APP</span></a>
                    <div class="arrow"></div>
                    <div class="code_con" style="width:160px;height:160px;display: none;">
                        <img src="http://www.hanyouwang.com/statics/images/header/code_mobile.png" width="160" height="160" alt="手机菲生活">
                    </div>
                </li>
                <li class="nav-top-right-wechat">
                    <span>公众号</span>
                    <div class="arrow"></div>
                    <div class="code_con" style="width:79px;height:79px;display: none;">
                        <img src="http://www.hanyouwang.com/statics/images/header/code_weixin.png" width="79" height="79" alt="微信">
                    </div>
                </li>
                <li class="nav-top-right-login" v-if="!isLogin"><router-link to="login">登陆</router-link></li>
                <li class="nav-top-right-login" v-if="isLogin"><a href="javascript:void(0)" v-on:click="logout()">登出</a></li>
            </ul>
        </div>
    </div>
</template>

<script>
    import store from "../store";
    import { isLogin } from "../api/user";

    export default {
        name: "nav-top",
        data() {
            return {
            }
        },
        computed:{
            isLogin () {
                return isLogin()
            }
        },
        methods: {
            logout() {
                store.dispatch('user/userLogout')
            }
        }
    }
</script>

<style lang="scss">
    .nav-top {
        width: 100%;
        background: #f6f6f6;
        .container {
            min-width: 1200px;
            width: 1200px;
            height: 30px;
            margin: 0 auto;
            color: #6c6c6c;
            font-size: 12px;
            .nav-top-left {
                float: left;
                color: #aaa;
                line-height: 30px;
            }

            .nav-top-right {
                float: right;
                display: block;
                li {
                    float: left;
                    position: relative;
                    z-index: 1800;
                    padding: 0 10px;
                    height: 31px;
                    a {
                        margin-top: -4px;
                        height: 30px;
                        overflow: hidden;
                        line-height: 32px;
                        vertical-align: middle;
                    }
                }
                .line {
                    width: 1px;
                    height: 10px;
                    padding: 0;
                    margin-top: 10px;
                    background-position: -18px -16px;
                    overflow: hidden;
                }
                .nav-top-right-login {
                    cursor: pointer;
                    padding-right: 17px;
                    padding-left: 5px;
                    margin-left: 5px;
                    margin-right: 5px;
                    border-left: #f6f6f6 solid 1px;
                }
                .nav-top-right-app {
                    cursor: pointer;
                    padding-right: 17px;
                    padding-left: 5px;
                    margin-left: 5px;
                    margin-right: 5px;
                    border-left: #f6f6f6 solid 1px;
                    .icon {
                        background: url(/images/app_top_icon.gif) -7px 0 no-repeat;
                        margin: 0;
                        width: 22px;
                        height: 30px;
                        float: left;
                    }
                    a {
                        height: 30px;
                        overflow: hidden;
                        line-height: 32px;
                        vertical-align: middle;
                        display: inline-block;
                        margin-top: -4px;
                        color: #6c6c6c;
                        span {
                            height: 30px;
                            overflow: hidden;
                            line-height: 32px;
                            display: block;
                            vertical-align: middle;
                        }
                    }
                    .arrow {
                        position: absolute;
                        z-index: 2;
                        right: 6px;
                        top: 15px;
                        width: 6px;
                        height: 3px;
                        transition: all .3s;
                        background-position: -28px -21px;
                    }
                }

            }
        }
    }
</style>
